<template>
	<div class="dianji">
		<view class="top1" v-if="top" @tap="backtop">
			<img src="../../static/top.png" alt="" />
		</view>
		<div class="dianji_content">
			<div class="list">
				<span class="_span">{{title}}</span>
			</div>
			<div class="text">
				<p class="title">{{title}}</p>
				<p class="content">{{desc}}</p>
			</div>
		</div>
		<div class="zhangjie" v-for="(item,index) in titles" @click="jump(item)">
			<div class="text">
				<p class="title" v-if="item!=null">本草纲目 . {{item}}</p>
				
			</div>
		</div>
	</div>
</template>

<script>

	export default{
	
		data(){
			return{
				title:"",
				desc:"",
				top:false,
				pageNum:0,
				pageSize:30,
				moreText:'加载中...',
				shiciList:[],
				titles:[],
			}
			},
			onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			                if (e.scrollTop > 100) { //当距离大于10时显示回到顶部按钮
			                    this.top = true
			                } else {
			                    this.top = false
			                }
			            },
			onLoad(options) {
				this.title=options.name;
				this.desc=options.desc;
				this.list()
			},
			
			methods:{
		jump(name){
			uni.navigateTo({
				url:'/pageB/bencaogangmu/bencaoganmgudetails/bencaoganmgudetails?name='+name
			})
		},
		async list() {
			let title=[]
			const data = await this.$api.bencaogangmu({
				content:''
			});
			data.rows.forEach((r)=>{
				title.push(r.title.split(" · ")[1])
			})
			console.log(title)
			this.titles=[...new Set(title)]
		},
		backtop(){
			uni.pageScrollTo({
			                    scrollTop: 0,
			                    duration: 100,
			                });
		},

			}
			}
</script>

<style lang="scss">
	.dianji{

		.dianji_content{
			
			margin-top: 20px;
			border-bottom: 1px solid #ffdcdc;
			margin-bottom: 10px;
			
			.list{
				width: 22%;
				height: 130px;
				float: left;
				background-image: url('https://www.leedong.top/img/dianji1.png');
				background-size: 100% 100%;
				._span{
					    writing-mode: tb-rl;
					    padding-left: 12px;
					    padding-top: 21px;
					    font-size: 12px;
					    font-weight: 800;
				}
			}
			.text{
				
				padding-left:20px;
				
				.title{
					color: $color;
					font-size: 30rpx;
				}
				.content{
					font-size: 25rpx;
					line-height: 18px;
					color:#616161;
					
					padding-top: 10px;
					text-indent: 4ch;
					
					
				}
			}
		}
		.zhangjie{
			margin-top: 10px;
			border-bottom: 1px solid #f5f5f5;
			.title{
				font-size: 30rpx;
				font-weight: 800;
				color:#7d8468;
				padding-left: 30px;
			}
			
		}
	}
</style>